<template>
    <div class="person" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="dataForm" status-icon ref="dataForm">
                <el-row>
                    <el-col :span="4">
                        <!-- <div class="depart-box">
              <div class="slect-title">分中心编码</div>
              <el-select filterable clearable v-model="dataForm.code">
                <el-option
                  v-for="item in branchcenterOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
                        </div>-->
                        <el-form-item label prop="code">
                            <el-input v-model="dataForm.code" placeholder="分中心编码">
                                <template slot="prepend">分中心编码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">分中心名称</div>
                            <el-select filterable clearable v-model="dataForm.name">
                                <el-option
                                    v-for="item in branchcenterOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="headmaster">
                            <el-input v-model="dataForm.headmaster" placeholder="校长姓名">
                                <template slot="prepend">校长姓名</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="phone">
                            <el-input v-model="dataForm.phone" placeholder="手机号码">
                                <template slot="prepend">手机号码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">大区经理</div>
                            <el-select filterable clearable v-model="dataForm.signRep">
                                <el-option
                                    v-for="(item,index) in signRepOption"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.name"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">状态</div>
                            <el-select clearable v-model="dataForm.status" filterable>
                                <el-option
                                    v-for="item in isopen"
                                    :key="item.lable"
                                    :label="item.value"
                                    :value="item.label"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <el-row class="area">
                            <el-col :span="4">
                                <span class="city-title">签约地区：</span>
                            </el-col>
                            <el-col :span="17" style="margin-left:-1px">
                                <el-form-item label prop="area">
                                    <el-cascader
                                        clearable
                                        @change="addressChange"
                                        size="large"
                                        :options="options"
                                        v-model="selectedOptions"
                                    ></el-cascader>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="7" style="margin-left:0">
                        <el-tag
                            style="float:left;margin-top: 4px;"
                            v-for="tag in diqutags3"
                            :key="tag.key"
                            closable
                            @close="tagsClose(tag)"
                            :type="tag.type"
                        >{{tag.value}}</el-tag>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="resetForm()"
                />
                <kt-button :label="$t('action.search')" perms="true" @click="searchForm" />
            </div>
        </div>
        <!-- 新增用户,导出按钮 -->
        <div class="add-btns">
            <kt-button
                :label="$t('action.add')"
                perms="SubCenterManage:SubCenterManage:add"
                type="primary"
                @click="handleAdd"
            />
        </div>
        <!--表格内容栏-->
        <Crm-table
            class="table-width"
            SubCenterManage
            permsEdit="SubCenterManage:SubCenterManage:edit"
            permsDeletePartment="true"
            permsResetPass="SubCenterManage:SubCenterManage:ResetPass"
            :data="pageResult"
            :columns="columns"
            :loading="loading"
            @findPage="findPage"
            @handleEdit="handleEdit"
            @handleResetpass="handleResetpass"
            @changeSwitch="changeSwitch"
            @handleCellClick="handleCellClick"
        ></Crm-table>

        <!--新增编辑界面-->
        <el-dialog
            class="add-pop personBox"
            :title="operation ? '新增' : '编辑'"
            width="30%"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="addClose"
        >
            <el-form
                :model="dataFormAdd"
                label-width="100px"
                ref="dataFormAdd"
                :size="size"
                class="SubCenterManage"
                label-position="right"
            >
                <el-form-item label="分中心编码" prop="code">
                    <el-input
                        v-model="dataFormAdd.code"
                        :disabled="operation ? false : true"
                        placeholder="分中心编码"
                        auto-complete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="分中心名称" prop="name">
                    <el-input
                        v-model="dataFormAdd.name"
                        type="email"
                        auto-complete="off"
                        placeholder="分中心名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="校长名称" prop="headmaster">
                    <el-input
                        v-model="dataFormAdd.headmaster"
                        type="email"
                        auto-complete="off"
                        placeholder="校长名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="dataFormAdd.phone" auto-complete="off" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="选择地区">
                    <el-cascader
                        clearable
                        @change="addressChangeADD"
                        size="large"
                        :options="options"
                        v-model="selectedOptionsAdd"
                    ></el-cascader>
                </el-form-item>
                <div class="star1 mb20">
                    <p>
                        <span class="star">*</span>签约地区
                    </p>
                    <div style="width: 80%;float: left;">
                        <el-tag
                            style="float:left;margin-top: 4px;"
                            v-for="(tag,index) in diqutags3ADD"
                            :key="index"
                            closable
                            v-model="dataFormAdd.name"
                            @close="tagsCloseADD(tag)"
                            :type="tag.type"
                        >{{tag.value}}</el-tag>
                    </div>
                </div>
                <div style="clear:both;"></div>
                <div @click="addBusinessType(dataFormAdd)">
                    <el-button type="primary" :size="size">添加业务线</el-button>
                </div>
                <div class="businessInfo" v-for="itemF in dataFormAdd.branchCenterBusinessInfo">
                    <template>
                        <el-row>
                            <el-col :span="19">
                                <el-row>
                                    <el-col :span="5" style="margin-top: 28px">
                                        <span style="color:red;">*</span>业务线
                                    </el-col>
                                    <el-col :span="19">
                                        <el-form-item style="clear:both;margin-top:20px">
                                            <el-select
                                                clearable
                                                v-model="itemF.businessType"
                                                placeholder="业务线"
                                            >
                                                <el-option
                                                    v-for="item in studentBusinessType"
                                                    :key="item.key"
                                                    :label="item.value"
                                                    :value="item.key"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="5" style="margin-top: 28px">
                                        <span style="color:red;margin-top: 28px;">*</span>合同有效期
                                    </el-col>
                                    <el-col :span="19">
                                        <el-form-item style="clear:both;margin-top:20px">
                                            <el-date-picker
                                                v-model="itemF.contractDateValue"
                                                type="datetimerange"
                                                range-separator="至"
                                                :default-time="['00:00:00', '23:59:59']"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                @change="immediChange(itemF)"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                            ></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="5" style="margin-top: 60px;">
                                <el-button size="mini" @click="deleteBusinessType(itemF)">删除</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :size="size" @click="closeDialogVisible">
                    {{
                    $t("action.cancel")
                    }}
                </el-button>
                <el-button
                    :size="size"
                    type="primary"
                    @click.native="submitForm('add')"
                    v-if="!dataFormAdd.id"
                    :loading="editLoading"
                >{{ $t("action.submit") }}</el-button>
                <el-button
                    :size="size"
                    type="primary"
                    @click.native="submitForm('edit')"
                    v-if="dataFormAdd.id"
                    :loading="editLoading"
                >{{ $t("action.submit") }}</el-button>
            </div>
        </el-dialog>
        <!-- 重置密码 -->
        <el-dialog
            class="resetpassword"
            title="重置密码"
            width="30%"
            :visible.sync="resetVisible"
            :close-on-click-modal="false"
        >
            <el-form label-width="110px" :rules="dataFormRules" ref="password" :model="dataFormAdd">
                <el-form-item label="分中心名称" prop="name">
                    <el-input v-model="dataFormAdd.name" :disabled="true" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item class="resetpassword-pass" label="密码" prop="resetpassword">
                    <el-input
                        v-model="dataFormAdd.password"
                        type="text"
                        auto-complete="off"
                        style="width: 50%;margin-right: 10%;margin-left: 1%"
                    ></el-input>
                    <kt-button
                        :label="$t('action.autopassword')"
                        @click="autopassword"
                        perms="Organization:Person:resetPass"
                        type="primary"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :size="size" @click.native="resetVisible = false">
                    {{
                    $t("action.cancel")
                    }}
                </el-button>
                <el-button
                    :size="size"
                    type="primary"
                    @click.native="resetPwd"
                    :loading="editLoading"
                >{{ $t("action.submit") }}</el-button>
            </div>
        </el-dialog>
        <!-- 业务线合同详情 -->
        <el-dialog
            class="add-pop MaterialMangeStatisticsPop"
            title="业务线详情"
            width="40%"
            :visible.sync="dialogVisibleBTY"
            :close-on-click-modal="false"
        >
            <el-table :data="businessTypeList" style="width: 100%">
                <el-table-column prop="businessTypeStr" label="业务线" width="180"></el-table-column>
                <el-table-column prop="contractDate" label="合同到期时间" width="180"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { regionData } from "element-china-area-data";
import QueryBox from "@/views/Core/QueryBox";
import axios from "axios";
import { baseUrl } from "@/utils/global";
import { CodeToText } from "element-china-area-data";
import { isArray } from "@/utils/validate";
export default {
    name: "Person",
    components: {
        PopupTreeInput,
        CrmTable,
        KtButton,
        QueryBox
    },
    data() {
        return {
            size: "small",
            filters: {
                name: ""
            },
            dataForm: {
            },
            //   地区
            options: regionData,
            selectedOptions: [],
            diqutags: [],
            exportPersonUrl: baseUrl + "/systemUser/exportUserInfo", //导出地址
            resetpassword: "",
            page: "person",
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "code", label: "分中心编码", minWidth: 80 },
                { prop: "name", label: "分中心名称", minWidth: 100 },
                { prop: "businessStr", label: "业务线", minWidth: 150 },
                { prop: "headmaster", label: "校长名称", minWidth: 100 },
                { prop: "phone", label: "手机号码", minWidth: 100 },
                { prop: "area", label: "签约地区", minWidth: 150 },
                {
                    prop: "contractDate",
                    label: "合同到期时间",
                    minWidth: 150,
                    formatter: (row, col) => {
                        if (row.hasMorebusiness) {
                            return (
                                <div class="ToppingDiv2">
                                    <a>点击查看详情</a>
                                </div>
                            );
                        } else {
                            return (
                                <div class="ToppingDiv">
                                    <a>{row.contractDate}</a>
                                </div>
                            );
                        }
                    }
                },
                { prop: "zt", label: "状态", minWidth: 120 }
            ],
            pageRequest: { pageNum: 1, pageSize: 8 },
            pageResult: {
                content: [],
                totalSize: ""
            },
            operation: false, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            resetVisible: false,
            loading: false,
            // resetpassForm:pageResult,
            dataFormRules: {
                code: [
                    {
                        required: true,
                        message: "请输入分中心编码",
                        trigger: "blur"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入分中心名称",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur"
                    }
                ],
                headmaster: [
                    {
                        required: true,
                        message: "请输入校长姓名",
                        trigger: "blur"
                    }
                ],
                area: [
                    {
                        required: true,
                        message: "请输入签约地区",
                        trigger: "blur"
                    }
                ],
                // businessType: [
                //     { required: true, message: "请输入业务线", trigger: "blur" }
                // ],
                // contractDateValue:[
                //     { required: true, message: "请输入业务线", trigger: "change" }
                // ],
                areaCode: [
                    {
                        required: true,
                        message: "请输入签约地区",
                        trigger: "blur"
                    }
                ]
            },
            // 新增编辑界面数据
            dataFormAdd: {
                userName: "",
                realName: "",
                oneLevelDeptId: "",
                twoLevelDeptId: "",
                threeLevelDeptId: "",
                roleId: "",
                phone: "",
                email: "",
                demoAccount: "",
                accountStatus: "",
                duty: "",
                acccountPassword: "",
                userType: "",
                isControlResource: "",
                areaCodes: "",
                branchCenterBusinessInfo: [
                    { businessType: "", contractDateValue: [] }
                ]
            },
            deptData: [],
            deptTreeProps: {
                label: "name",
                children: "children"
            },
            isopen: [
                {
                    value: "锁定",
                    label: "2"
                },
                {
                    value: "开启",
                    label: "1"
                }
            ],
            branchcenterOption: [],
            signRepOption: [],
            studentBusinessType: [],
            diqutags2: [],
            diqutags3: [],
            diqutagsADD: [],
            diqutags2ADD: [],
            diqutags3ADD: [],
            selectedOptionsAdd: [],
            oldEidtAreaCode: [],
            businessTypeList: [],
            dialogVisibleBTY: false
        };
    },
    methods: {
        // 添加业务线合同
        addBusinessType(data) {
            this.dataFormAdd.branchCenterBusinessInfo.push({
                businessType: "",
                contractDateValue: [],
                centerId: data.id ? data.id : ""
            });
        },
        deleteBusinessType(row) {
            this.dataFormAdd.branchCenterBusinessInfo.splice(
                this.dataFormAdd.branchCenterBusinessInfo.findIndex(
                    item => item.businessType === row.businessType
                ),
                1
            );
        },
        immediUpdate(data, e) {
            if (e == null) {
                this.$set(data, data.contractDateValue, []);
            } else {
                this.$set(data, data.contractDateValue, e);
            }
        },
        immediChange(data) {
            //
        },
        handleCellClick(data) {
            if (
                data.row.property == "contractDate" &&
                data.index.hasMorebusiness
            ) {
                this.dialogVisibleBTY = true;
                this.businessTypeList = data.index.branchCenterBusinessInfo;
            }
        },
        //获取下拉框
        findDown: function() {
            this.$api.dropdown.branchcenter().then(res => {
                this.branchcenterOption = res.branchCenterInfoList;
            });
            this.$api.ownship.querySignRep().then(res => {
                this.signRepOption = res.signRepList;
                let signRepListJson = [];
                for (let i = 0; i < res.signRepList.length; i++) {
                    let j = {};
                    j.name = res.signRepList[i];
                    signRepListJson.push(j);
                }
                for (let i of signRepListJson) {
                    i.value = i.name; //将想要展示的数据作为value
                }
                this.signRepOption = signRepListJson;
            });
            // 获取业务线
            this.studentBusinessType = JSON.parse(
                localStorage.getItem("studentBusinessType")
            );
        },

        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }

            this.dataForm.pageSize = this.pageRequest.pageSize;
            this.dataForm.pageNum = this.pageRequest.pageNum;
            this.$api.ownship
                .branchcenterList(this.dataForm)
                .then(res => {
                    if (res.result == 1) {
                        this.pageResult.content = res.branchCenterInfoList;
                        this.pageResult.totalSize = res.total;
                        this.loading = false;
                        this.pageResult.content.forEach(item => {
                            if (item.status == 1) {
                                item.zt = "开启";
                            } else {
                                item.zt = "锁定";
                            }

                            let businessTypes = [];
                            // 当有大于1个业务线的时候
                            item.branchCenterBusinessInfo.forEach(bItem => {
                                if (bItem.businessType) {
                                    this.studentBusinessType.forEach(j => {
                                        if (bItem.businessType == j.key) {
                                            bItem.businessTypeStr = j.value;
                                        }
                                    });
                                    businessTypes.push(bItem.businessTypeStr);
                                }
                                item.businessStr = businessTypes.toString();
                                if (item.branchCenterBusinessInfo.length > 1) {
                                    item.hasMorebusiness = true;
                                    if (bItem.startDate && bItem.stopDate) {
                                        bItem.startDateStr = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                                            bItem.startDate
                                        );
                                        bItem.stopDateStr = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                                            bItem.stopDate
                                        );
                                        bItem.contractDateValue = [
                                            bItem.startDate,
                                            bItem.stopDate
                                        ];
                                        bItem.contractDate =
                                            bItem.startDateStr +
                                            "至" +
                                            bItem.stopDateStr;
                                    }
                                } else if (
                                    item.branchCenterBusinessInfo.length == 1
                                ) {
                                    item.hasMorebusiness = false;
                                    if (bItem.startDate && bItem.stopDate) {
                                        bItem.startDateStr = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                                            bItem.startDate
                                        );
                                        bItem.stopDateStr = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
                                            bItem.stopDate
                                        );
                                        item.contractDate =
                                            bItem.startDateStr +
                                            "至" +
                                            bItem.stopDateStr;
                                        bItem.contractDateValue = [
                                            bItem.startDate,
                                            bItem.stopDate
                                        ];
                                    }
                                }
                            });

                            if (item.businessType) {
                                item.businessType = item.businessType.split(
                                    ","
                                );
                                if (item.businessType.length > 0) {
                                    let newarry = [];
                                    // 业务线转义
                                    for (
                                        let i = 0;
                                        i < item.businessType.length;
                                        i++
                                    ) {
                                        let j = {};
                                        j.key = item.businessType[i];
                                        newarry.push(j);
                                    }
                                    let newbusinessType = [];
                                    item.businessType1 = newarry;
                                    this.studentBusinessType.forEach(
                                        typeitem => {
                                            item.businessType1.forEach(
                                                newItem => {
                                                    if (
                                                        typeitem.key ==
                                                        newItem.key
                                                    ) {
                                                        newItem.value =
                                                            typeitem.value;
                                                    }
                                                }
                                            );
                                        }
                                    );
                                    item.businessType1.forEach(i => {
                                        if (item.businessType.length > 1) {
                                            newbusinessType.push(i.value + ",");
                                        } else {
                                            newbusinessType.push(i.value);
                                        }
                                    });
                                    item.newbusinessType = newbusinessType;
                                }
                            }
                            if (item.areaCode) {
                                item.areaCode = item.areaCode.split(",");
                                if (item.areaCode.length > 0) {
                                    let newCodearry = [];
                                    // 地区编码添加属性
                                    for (
                                        let i = 0;
                                        i < item.areaCode.length;
                                        i++
                                    ) {
                                        let j = {};
                                        j.key = item.areaCode[i];
                                        newCodearry.push(j);
                                    }
                                    let newbusinessType = [];
                                    item.newAreaCode = newCodearry;
                                    item.newAreaCode.forEach(n => {
                                        n.value = CodeToText[n.key];
                                    });
                                }
                            }
                        });
                    }
                })
                .then(data != null ? data.callback : "");
        },
        //重置
        resetForm: function() {
            this.dataForm = {};
            this.dataForm.areaCode = "";
            this.selectedOptions = [];
            this.diqutags = [];
            this.diqutags2 = [];
            this.diqutags3 = [];
            this.editLoading = false;
            this.findPage(null);
            this.findDown();
        },
        //查询
        searchForm: function() {
            this.findPage(null);
        },
        //新增页面展示
        handleAdd: function() {
            this.operation = true;
            this.dialogVisible = true;
            this.dataFormAdd = {
                password: 111111,
                userName: "",
                realName: "",
                oneLevelDeptId: "",
                twoLevelDeptId: "",
                threeLevelDeptId: "",
                roleId: "",
                phone: "",
                email: "",
                demoAccount: "",
                accountStatus: "",
                duty: "",
                acccountPassword: "",
                userType: "",
                isControlResource: "",
                areaCodes: "",
                branchCenterBusinessInfo: [
                    { businessType: "", contractDateValue: [] }
                ]
            };

            this.diqutags3 = [];
            this.diqutags3ADD = [];
            this.selectedOptionsAdd = [];
        },
        //编辑页面展示
        handleEdit: function(params) {
            this.operation = false;
            this.dialogVisible = true;
            if (!this.oldEidtAreaCode) {
                this.oldEidtAreaCode = params.row.areaCode;
            }
            this.dataFormAdd = Object.assign({}, params.row);
            // 签约地区回显
            this.diqutags3ADD = params.row.newAreaCode;
            this.dataFormAdd.areaCode = params.row.areaCode;
            this.selectedOptionsAdd = [];
        },
        //重置密码页面展示
        handleResetpass: function(params) {
            this.resetVisible = true;
            this.dataFormAdd = Object.assign({}, params.row);
        },
        closeDialogVisible() {
            this.dialogVisible = false;
            this.findPage(null);
        },
        //密码提交
        resetPwd: function() {
            this.$refs.password.validate(valid => {
                if (valid) {
                    this.$confirm("确认重置密码吗？", "提示", {}).then(() => {
                        this.data = {
                            id: this.dataFormAdd.id,
                            password: this.dataFormAdd.password
                        };
                        this.editLoading = true;
                        let params = Object.assign({}, this.data);
                        this.$api.ownship.resetPassword(params).then(res => {
                            this.editLoading = false;
                            if (res.result == 1) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.resetVisible = false;
                                this.findPage(null);
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: "error"
                                });
                            }
                            this.findPage(null);
                        });
                    });
                }
            });
        },
        //新增提交
        submitForm: function(params) {
            let newArry = [];
            const isgo = this.dataFormAdd.branchCenterBusinessInfo.every(
                item => {
                    newArry.push(item.businessType);
                    if (new Set(newArry).size !== newArry.length) {
                        this.$message({
                            message: "业务线重复！",
                            type: "error"
                        });
                        return false;
                    }

                    if (item.businessType == "" || !item.businessType) {
                        this.$message({
                            message: "请输入业务线！",
                            type: "error"
                        });
                        return false;
                    }
                    if (
                        !item.contractDateValue ||
                        item.contractDateValue.length == 0
                    ) {
                        this.$message({
                            message: "请输入合同日期！",
                            type: "error"
                        });
                        return false;
                    }
                    if (
                        item.contractDateValue ||
                        item.contractDateValue.length > 0
                    ) {
                        item.startDate = item.contractDateValue[0];
                        item.stopDate = item.contractDateValue[1];
                    }
                    return true;
                }
            );
            if (params == "add" && isgo) {
                this.submitFormData();
            }
            if (params == "edit" && isgo) {
                this.submitFormEdit();
            }
        },
        // 提交数据
        submitFormData() {
            this.$refs.dataFormAdd.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this.editLoading = true;
                        let params = Object.assign({}, this.dataFormAdd);
                        delete params.businessType1;
                        delete params.newbusinessType;
                        delete params.areaCode;
                        if (this.dataFormAdd.areaCode) {
                            params.areaCode = this.dataFormAdd.areaCode.toString(
                                ","
                            );
                        } else {
                            this.$message({
                                message: "请输入签约地区",
                                type: "error"
                            });
                            this.editLoading = false;
                        }
                        if (!params.areaCode || params.areaCode == "") {
                            // this.$message({ message: "请输入签约地区", type: "error" });
                            this.editLoading = false;
                        } else {
                            this.$api.ownship
                                .addBranchCenterInfo(params)
                                .then(res => {
                                    this.editLoading = false;
                                    if (res.result == 1) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.dialogVisible = false;
                                        this.$refs["dataFormAdd"].resetFields();
                                        this.diqutags3ADD = [];
                                        this.oldEidtAreaCode = [];
                                        this.diqutagsADD = [];
                                        this.diqutags3 = [];
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: "error"
                                        });
                                        this.editLoading = false;
                                    }
                                    this.findPage(null);
                                });
                        }
                    });
                }
            });
        },
        //编辑提交
        submitFormEdit: function() {
            this.$refs.dataFormAdd.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this.editLoading = true;
                        let params = Object.assign({}, this.dataFormAdd);
                        delete params.businessType1;
                        delete params.newbusinessType;
                        delete params.newAreaCode;
                        delete params.areaCode;
                        delete params.startDate;
                        delete params.stopDate;
                        if (this.dataFormAdd.areaCode)
                            if (isArray(this.dataFormAdd.areaCode)) {
                                // params.areaCode=this.dataFormAdd.areaCode.join(",")
                                // params.areaCode=this.dataFormAdd.areaCode
                                params.areaCode = this.dataFormAdd.areaCode.join(
                                    ","
                                );
                            } else {
                                params.areaCode = this.dataFormAdd.areaCode;
                            }
                        this.$api.ownship
                            .updateBranchCenterInfo(params)
                            .then(res => {
                                this.editLoading = false;
                                if (res.result == 1) {
                                    this.$message({
                                        message: res.msg,
                                        type: "success"
                                    });
                                    this.dialogVisible = false;
                                    this.diqutags3ADD = [];
                                    this.oldEidtAreaCode = [];
                                    this.diqutagsADD = [];
                                    this.diqutags3 = [];
                                    this.resetForm();
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: "error"
                                    });
                                    this.resetForm();
                                }
                            });
                    });
                }
            });
        },
        addClose() {
            this.diqutags3ADD = [];
            this.oldEidtAreaCode = [];
            this.diqutagsADD = [];
            this.diqutags3 = [];
        },
        // 自动生成密码
        autopassword: function() {
            var password = "";
            var passLength = 8;
            var random = new Array(
                0,
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                "A",
                "B",
                "C",
                "D",
                "E",
                "F",
                "G",
                "H",
                "I",
                "J",
                "K",
                "L",
                "M",
                "N",
                "O",
                "P",
                "Q",
                "R",
                "S",
                "T",
                "U",
                "V",
                "W",
                "X",
                "Y",
                "Z"
            );
            //随机数
            for (let i = 0; i < passLength; i++) {
                //循环操作
                var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
                password += random[index];
            }
            this.dataFormAdd.password = password;
        },
        //switch开关
        changeSwitch: function(data) {
            let userId = data.row.id;
            this.$api.ownship.updateStatus({ id: userId }).then(res => {
                if (res.result == 1) {
                    this.$message({ message: res.msg, type: "success" });
                    this.findPage(null);
                } else {
                    this.$message({ message: res.msg, type: "error" });
                    this.findPage(null);
                }
            });
        },
        addressChange(params) {
            // 判断用户是否点击清空
            if (params.length == 0) {
                (this.diqutags.length = 0),
                    (this.diqutags3.length = 0),
                    (this.diqutags2.length = 0),
                    (this.dataForm.areaCode = "");
            } else {
                this.dataForm.areaCode = params[2];
                this.diqutags.push(this.dataForm.areaCode);
                let newarry = [];
                // 追加属性
                for (let i = 0; i < this.diqutags.length; i++) {
                    let j = {};
                    j.key = this.diqutags[i];
                    newarry.push(j);
                }
                this.diqutags2 = newarry;
                this.diqutags2.forEach(item => {
                    item.key = item.key;
                    item.value = CodeToText[item.key];
                });
                // 去重
                let hash = {};
                const data2 = this.diqutags2.reduce((preVal, curVal) => {
                    hash[curVal.key]
                        ? ""
                        : (hash[curVal.key] = true && preVal.push(curVal));
                    return preVal;
                }, []);
                this.diqutags3 = data2;
                // 查询数据重组
                this.dataForm.areaCode = this.diqutags.join(",");
            }
            // this.selectedOptions=[]
        },
        addressChangeADD(params) {
            if (params.length == 0) {
                this.diqutags3ADD.length = 0;
                this.diqutags2ADD.length = 0;
                this.diqutagsADD.length = 0;
                this.dataFormAdd.areaCode = "";
            } else {
                this.diqutagsADD.push(params[2], ...this.oldEidtAreaCode);
                let newarry = [];

                // 追加属性
                for (let i = 0; i < this.diqutagsADD.length; i++) {
                    let j = {};
                    j.key = this.diqutagsADD[i];
                    newarry.push(j);
                }
                this.diqutagsADD = Array.from(new Set(this.diqutagsADD));
                this.diqutags2ADD = newarry;
                this.diqutags2ADD.forEach(item => {
                    item.key = item.key;
                    item.value = CodeToText[item.key];
                });
                // 去重
                let hash = {};
                const data2 = this.diqutags2ADD.reduce((preVal, curVal) => {
                    hash[curVal.key]
                        ? ""
                        : (hash[curVal.key] = true && preVal.push(curVal));
                    return preVal;
                }, []);
                this.diqutags3ADD = data2;
                this.dataFormAdd.areaCode = this.diqutagsADD.join(",");
            }
            // this.selectedOptions=[]
        },
        tagsClose(params) {
            // this.diqutags3.splice(params, 1);
            // this.diqutags.splice(this.diqutags.findIndex(v => v == params.key), 1);
            this.diqutags3.splice(
                this.diqutags3.findIndex(item => item.key === params.key),
                1
            );
            this.diqutags.splice(
                this.diqutags.findIndex(v => v == params.key),
                1
            );
            this.dataForm.areaCode = this.diqutags.join(",");
            if (this.diqutags.length == 0) {
                this.selectedOptions = [];
            }
        },
        // 新增地区关闭
        tagsCloseADD(params) {
            this.diqutags3ADD.splice(
                this.diqutags3ADD.findIndex(item => item.key === params.key),
                1
            );
            this.diqutagsADD = this.oldEidtAreaCode;
            this.diqutagsADD.splice(
                this.diqutagsADD.findIndex(item => item === params.key),
                1
            );
            this.dataForm.areaCode = this.diqutagsADD.join(",");
            if (this.diqutagsADD.length == 0) {
                this.selectedOptions = [];
            }
        }
    },
    mounted() {
        this.findDown();
        this.findPage(null);
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
.person input::-webkit-outer-spin-button,
.person input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
</style>
<style lang="scss">
.MaterialMangeStatisticsPop {
    .el-table {
        width: 100% !important;
    }
    .el-table__header,
    .el-table__body {
        width: 100% !important;
    }
    .el-table td.gutter,
    .el-table th.gutter {
        display: block !important;
    }
}
.SubCenterManage {
    .businessInfo {
        .el-form-item__content,
        .el-date-editor {
            margin-left: 0 !important;
        }
    }
    .el-cascader {
        width: 100%;
    }
    .el-date-editor--datetimerange.el-input,
    .el-date-editor--datetimerange.el-input__inner {
        width: 100% !important;
    }
}
.SubCenterManageAdd {
    .el-input--suffix {
        height: 32px;
        line-height: 32px;
        width: 100%;
    }
    .el-cascader,
    .el-range-editor--small.el-input__inner {
        width: 100%;
    }

    .addFormADD {
        float: left;
    }
    .star1 {
        > p {
            float: left;
            margin-right: 38px;
        }

        .star {
            display: inline-block;
            color: red;
        }
    }
}
</style>
<style lang="scss" scoped>
.ToppingDiv2 {
    a {
        cursor: pointer;
        line-height: 20px;
        color: blue;
    }
}
</style>